import 'package:flutter/material.dart';

class CustomTab extends StatefulWidget {
  int modeValue;
  bool isAutoScroll;
  ValueChanged<int> modeListener;
  ValueChanged<bool> isAutoScrollListener;

  CustomTab(
      {Key key,
      this.modeListener,
      this.isAutoScrollListener,
      this.modeValue = 1,
      this.isAutoScroll = false})
      : super(key: key);

  @override
  _CustomTabState createState() => _CustomTabState();
}

class _CustomTabState extends State<CustomTab> {

  @override
  Widget build(BuildContext context) {
    TextStyle styText = TextStyle(fontSize: 16, color: Colors.white);
    TextStyle styText2 = TextStyle(fontSize: 16, color: Colors.grey);
    return Container(
      child: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            width: double.infinity,
            height: 40,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Expanded(
                    flex: 5,
                    child: GestureDetector(
                      onTap: () {
                        setState(() {
                          if (widget.modeValue != 1) {
                            widget.isAutoScroll = false;
                          }
                          widget.modeValue = 1;
                        });
                        widget.modeListener(widget.modeValue);
                        widget.isAutoScrollListener(widget.isAutoScroll);
                      },
                      child: AnimatedContainer(
                          duration: Duration(milliseconds: 300),
                          height: 40,
                          padding: EdgeInsets.symmetric(horizontal: 10),
                          constraints: BoxConstraints(
                              maxWidth: MediaQuery.of(context).size.width / 3),
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(4),
                                bottomLeft: Radius.circular(4),
                              ),
                              color: widget.modeValue == 1
                                  ? Color.fromRGBO(27, 188, 242, 1)
                                  : Color.fromRGBO(25, 53, 65, 1),
                              border: Border.all(
                                  color: Color.fromRGBO(27, 188, 242, 1))),
                          child: Text('灯屏模式',
                              style: widget.modeValue == 1 ? styText : styText2,
                              overflow: TextOverflow.ellipsis)),
                    )),
                Expanded(flex: 1, child: SizedBox()),
                Expanded(
                    flex: 5,
                    child: GestureDetector(
                      onTap: () {
                        setState(() {
                          if (widget.modeValue != 2) {
                            widget.isAutoScroll = false;
                          }
                          widget.modeValue = 2;
                        });
                        widget.modeListener(widget.modeValue);
                        widget.isAutoScrollListener(widget.isAutoScroll);
                      },
                      child: AnimatedContainer(
                        duration: Duration(milliseconds: 300),
                        height: 40,
                        padding: EdgeInsets.symmetric(horizontal: 10),
                        constraints: BoxConstraints(
                            maxWidth: MediaQuery.of(context).size.width / 3),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.only(
                              topRight: Radius.circular(4),
                              bottomRight: Radius.circular(4),
                            ),
                            color: widget.modeValue == 2
                                ? Color.fromRGBO(27, 188, 242, 1)
                                : Color.fromRGBO(25, 53, 65, 1),
                            border: Border.all(
                                color: Color.fromRGBO(27, 188, 242, 1))),
                        child: Text('灯条模式',
                            style: widget.modeValue == 2 ? styText : styText2,
                            overflow: TextOverflow.ellipsis),
                      ),
                    )),
              ],
            ),
          ),
          GestureDetector(
              onTap: () {
                setState(() {
                  widget.isAutoScroll = !widget.isAutoScroll;
                });
                widget.modeListener(widget.modeValue);
                widget.isAutoScrollListener(widget.isAutoScroll);
              },
              child: SizedBox(
                height: 55,
                width: 55,
                child: widget.isAutoScroll
                    ? Image.asset('assets/images/loop2.png')
                    : Image.asset('assets/images/loop1.png'),
              ))
        ],
      ),
    );
  }
}
